<template>
    <div class="addProduct">
        <step-add :active='0'></step-add>
        <div>
            <van-cell-group style="text-align:left">
                <van-cell is-link title="商品名称" :value="form.fproductname" @click="showProductClick"/>
                <van-popup v-model="showProduct" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择商品' 
                        :columns="columns"
                        show-toolbar
                        @cancel="onCancel4P"
                        @confirm="onConfirm4P"
                     />
                </van-popup>
                <van-field v-model="form.fproductspec" label="商品规格" />
                <van-field v-model="form.fproductband" label="商品商标" />
                <van-field v-model="form.fproductband" label="商品许可证" />

                <van-cell is-link title="生产单位" :value="form.fproductname" @click="showCompanyclick"/>
                <van-popup v-model="showCompany" get-container="body" position='bottom'>
                    <van-picker 
                        title='请选择生产单位' 
                        :columns="columns"
                        show-toolbar
                        @cancel="onCancel4C"
                        @confirm="onConfirm4C"
                     />
                </van-popup>
                <van-field v-model="form.fdeptadd_prod" label="生产单位地址" />
                <van-field v-model="form.fdepttel_prod" label="生产单位电话" />
                <van-field v-model="form.fdeptzipcode_prod" label="生产单位邮编" />
            </van-cell-group>
        </div>
        <div class='stepFooter' @click="toAddStep2()">
            下一步
        </div>
    </div>
</template>

<script>
import { 
    Button
    ,DropdownMenu
    , DropdownItem
    ,Icon 
    ,Field
    ,DatetimePicker
    ,Popup
    ,Cell
    ,CellGroup
    ,Picker } from 'vant';
import stepAdd from '@/components/stepAdd'
export default {
    name: 'addProduct',
    components: {
        stepAdd,
        [Icon.name]:Icon,
        [Button.name]:Button,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [Cell.name]:Cell,
        [CellGroup.name]:CellGroup,
        [Field.name]:Field,
        [DatetimePicker.name]:DatetimePicker,
        [Popup.name]:Popup,
        [Picker.name]:Picker,
    },
    data () {
        return {
            showProduct:false,
            showCompany:false,
            columns: [
                { text: '商品一',id:1},
                { text: '商品二' },
                { text: '商品三' }
            ],
            form:{
                fcontractproductid:'',//合同样品表主键
                fcontractid:'',//合同主键
                fcontractcode:'',//合同编号
                fcontractdate:'',//合同日期
                fdeptid_cus:'',//委托单位主键
                fdeptadd_cus:'',//委托单位地址
                fdepttel_cus:'',//委托单位电话
                fdepperson_cus:'',//委托单位经手人
                fdeptzipcode_cus:'',//委托单位邮编
                fdeppersonmob_cus:'',//委托单位经手人联系电话
                fcruserid:'',//创建人
                fuseridwx:'',//创建人微信
                fcrdate:'',//创建日期
                fdeptid_prod:'',//生产单位逐渐
                fdeptadd_prod:'',//生产单位地址
                fdepttel_prod:'',//生产单位电话
                fdeptzipcode_prod:'',//生产单位邮编
                freporttemplateid:'',//报告模版主键
                fchecktypeid:'',//检验类别
                fproductid:'',//商品主键
                fproductname:'',//商品名称
                fproductspec:'',//商品规格
                fproductband:'',//商品商标

            }
        }
    },
    methods:{
        toAddStep2(){
            this.$router.push({path:"/addProduct2"});
        },
        showProductClick(){
            this.showProduct = true
        },
        onCancel4P(){

        },
        onConfirm4P(val){
            console.log(val)
            this.form.value = val.text
            this.showProduct = false
        },
        onCancel4C(){

        },
        onConfirm4C(val){
            console.log(val)
            this.showCompany = false
        },
        showCompanyclick(){
            this.showCompany = true
        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.stepFooter{
    width:100%;
    height: 40px;
    line-height: 40px;
    position: fixed;
    bottom: 0;
    left:0;
    background:  #1989fa;
    color: white
}

</style>
